<template>
  <div>
    <el-table
      :data="tableData"
      border
      class="table-m"
      stripe>
      <el-table-column
        label="#"
        type="index"
        width="48">
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goods_name">
      </el-table-column>
      <el-table-column
        label="商品价格(元)"
        prop="goods_price"
        width="120">
      </el-table-column>
      <el-table-column
        label="商品重量"
        prop="goods_weight"
        width="90">
      </el-table-column>
      <el-table-column
        :formatter="formatter"
        label="创建时间"
        prop="add_time"
        width="140">
      </el-table-column>
      <el-table-column
        label="操作"
        prop="操作"
        width="120">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit"
                     size="mini"
                     type="primary"
                     @click="setGoodsInfo(scope.row)"
          ></el-button>
          <el-button icon="el-icon-delete"
                     size="mini"
                     type="danger"
                     @click="removeGoods(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--      底部分页-->
    <div class="block">
      <el-pagination
        :current-page="pagenum"
        :disabled="disabled"
        :page-size="10"
        :page-sizes="[5, 10, 15, 40]"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!--      /底部分页-->
    <!--    修改商品-->
    <putGoodData v-if="goodDataVisible" :form="form" :goodDataVisible.sync="goodDataVisible"></putGoodData>
    <!--    /修改商品-->
  </div>
</template>

<script>
import { formatTime } from '@/utils/dayjs'
import { deleteGoods, getGoodsData } from '@/api/commodity'
import putGoodData from '@/views/commodity/components/putGoodsData'

export default {
  name: 'GoodsTable',
  methods: {
    // 渲染时间
    formatter (row, column, cellValue) {
      // console.log(row, column, cellValue)
      const date = new Date(cellValue * 1000)
      // console.log(formatTime(date))
      return formatTime(date)
    },
    // 修改商品
    async setGoodsInfo (item) {
      const res = await getGoodsData(item.goods_id)
      console.log(res.data)
      this.form = res.data
      this.goodDataVisible = true
    },
    // 删除商品
    removeGoods (item) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(str.id)
        deleteGoods(item.goods_id).then(res => {
          if (res.meta.status === 200) {
            this.$emit('getGoodsList')
            this.$message({
              message: res.meta.msg,
              type: 'success'
            })
          } else {
            this.$message(res.meta.msg)
          }
        }).catch(() => {
          this.$message('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页操作
    handleSizeChange (value) {
      // console.log(value)
      this.params.pagesize = value
      this.$emit('update:disabled', true)
      this.$emit('getGoodsList')
    },
    handleCurrentChange (value) {
      // console.log(value)
      this.params.pagenum = value
      this.$emit('update:disabled', true)
      this.$emit('getGoodsList')
    }
  },
  data () {
    return {
      pagenum: 1,
      goodDataVisible: false,
      form: {}
    }
  },
  props: {
    tableData: Array,
    total: [Number, String],
    params: Object,
    disabled: Boolean
  },
  components: {
    putGoodData
  }
}
</script>

<style scoped>

</style>
